<template>
    <div class='home-container'>
        <SideNav :openeds="openeds" :activeTab="activeTab"></SideNav>
        <div class='right-container'>
            <Header class="header" :headerList="headerList"></Header>
            <div class="right-content white-color">
                <div class="add-title">
                    <img src="../../src/assets/img/welcome/add.png" alt="">
                    <span>新增班级</span>
                </div>
                <div class="add-form-container">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="add-form">
                        <el-form-item label="班级名称" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="请填写班级名称"></el-input>
                        </el-form-item>
                        <el-form-item label="课程类型" prop="type">
                            <el-select v-model="ruleForm.type" placeholder="请选择">
                                <el-option label="直播课程" value="直播课程"></el-option>
                                <el-option label="点播课程" value="点播课程"></el-option>
                                <el-option label="面授课程" value="面授课程"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="学科" prop="subject">
                            <el-select v-model="ruleForm.subject" placeholder="请选择">
                                <el-option v-for="item in subjectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="讲师" prop="lecturer">
                            <el-col>
                                <el-select v-model="ruleForm.lecturer" placeholder="请选择">
                                    <el-option v-for="item in teacherList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
                                </el-select>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="助教" prop="assistant">
                            <el-select v-model="ruleForm.assistant" placeholder="请选择">
                                <el-option v-for="item in assistantList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开课日期" prop="begindate">
                            <el-col :span="11">
                                <el-form-item >
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="ruleForm.begindate"
                                        style="width: 100%;"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line date-line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="enddate">
                                    <el-date-picker
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="ruleForm.enddate"
                                        style="width: 100%;"
                                        format="yyyy-MM-dd"
                                        value-format="yyyy-MM-dd"
                                    >
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="开课时间" prop="begintime">
                            <el-col :span="11">
                                <el-form-item>
                                    <el-time-picker v-model="ruleForm.begintime" placeholder="选择时间" style="width: 100%;" format="HH:mm:ss"
                                                    value-format="HH:mm">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line date-line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="endtime">
                                    <el-time-picker v-model="ruleForm.endtime" placeholder="选择时间" style="width: 100%;" format="HH:mm:ss"
                                                    value-format="HH:mm">
                                    </el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item class="btn-group">
                            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                            <el-button @click="$router.push('/classList')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
import Header from '../../src/components/Header'
import SideNav from '../../src/components/SideNav'
import {
    addClass,
    updateClass,
    getClassDetail
} from '@/api/classList'
import { getSubjectList } from '@/api/subjectList'
import { getTeacherList } from '@/api/teachList'
export default {
    name: 'home',
    data() {
        return {
            headerList: ['会员', '班级', '新增班级'],
            openeds: ['5', '5-1'],
            activeTab: 'Member',
            ruleForm: {
                subject: '',
                name: '',
                lecturer: '',
                assistant: '',
                begindate: '',
                enddate: '',
                begintime: '',
                endtime: '',
                type: ''
            },
            rules: {
                name: [{
                    required: true,
                    message: '请填写班级名称',
                    trigger: 'blur'
                }],
                subject: [{
                    required: true,
                    message: '请选择学科',
                    trigger: 'change'
                }],
                lecturer: [{
                    required: true,
                    message: '请选择讲师',
                    trigger: 'change'
                }],
                assistant: [{
                    required: true,
                    message: '请选择助教',
                    trigger: 'change'
                }],
                begindate: [{
                    required: true,
                    message: '请选择开课日期',
                    trigger: 'change'
                }],
                enddate: [{
                    required: true,
                    message: '请选择开课日期',
                    trigger: 'change'
                }],
                begintime: [{
                    required: true,
                    message: '请选择开课时间',
                    trigger: 'change'
                }],
                endtime: [{
                    required: true,
                    message: '请选择时间',
                    trigger: 'change'
                }],
                type: [{
                    required: true,
                    message: '请选择课程类型',
                    trigger: 'change'
                }]
            },
            id: this.$route.query.id,
            action: this.$route.query.action,
            submitApi: this.$route.query.action === 'edit' ? updateClass : addClass,
            submitMsg: this.$route.query.action === 'edit' ? '编辑成功' : '添加成功',
            subjectList: [],
            teacherList: [],
            assistantList: []
        }
    },
    created() {
        this.getSubjectList()
        this.getTeacherList()
        if (this.$route.query.action === 'edit') {
            this.getDetail()
        } else {
            this.resetForm()
        }
    },
    methods: {
        getSubjectList() {
            getSubjectList({}).then(res => {
                if (res.code == 1) {
                    this.subjectList = res.data
                }
            })
        },
        getTeacherList() {
            getTeacherList({}).then(res => {
                if (res.code == 1) {
                    let data = res.data || []
                    data.forEach(item => {
                        if(item.type === 2) {
                            this.teacherList.push(item)
                        }else if(item.type === 3) {
                            this.assistantList.push(item)
                        }
                    })
                }
            })
        },
        getDetail() {
            getClassDetail({
                id: this.id
            }).then(res => {
                if (res.code == 1) {
                    let data = res.data
                    this.ruleForm.name = data.name
                    this.ruleForm.subject = data.subject
                    this.ruleForm.lecturer = data.lecturer
                    this.ruleForm.assistant = data.assistant
                    this.ruleForm.begindate = data.begindate
                    this.ruleForm.enddate = data.enddate
                    this.ruleForm.begintime = data.begintime
                    this.ruleForm.endtime = data.endtime
                    this.ruleForm.type = data.type
                }
            })
        },
        async submitForm(formName) {
            let _self = this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let data = {
                        name: _self.ruleForm.name,
                        subject: _self.ruleForm.subject,
                        lecturer: _self.ruleForm.lecturer,
                        assistant: _self.ruleForm.assistant,
                        begindate: _self.ruleForm.begindate,
                        enddate: _self.ruleForm.enddate,
                        begintime: _self.ruleForm.begintime,
                        endtime: _self.ruleForm.endtime,
                        type: _self.ruleForm.type
                    }
                    if (this.action === 'edit') {
                        data.id = this.$route.query.id
                    }
                    this.submitApi(data).then(res => {
                        if (res.code == 1) {
                            _self.$message({
                                message: this.submitMsg,
                                type: 'success'
                            })
                            _self.$router.push({
                                path: '/classList'
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        resetForm() {
            this.ruleForm.name = ''
            this.ruleForm.subject = ''
            this.ruleForm.lecturer = ''
            this.ruleForm.assistant = ''
            this.ruleForm.begindate = ''
            this.ruleForm.enddate = ''
            this.ruleForm.begintime = ''
            this.ruleForm.endtime = ''
            this.ruleForm.type = ''
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        }
    },
    components: {
        Header,
        SideNav
    }
}

</script>
<style lang="less" scoped>
    @import url('../../src/assets/less/Mixins.less');
    @import url('../../src/assets/less/common.less');

    html,
    body {
        height: 100%
    }

    .add-title {
        height: 70px;
        line-height: 70px;
        padding-left: 30px;

        img {
            height: 20px;
            width: 20px;
            position: relative;
            top: 4px;
            margin-right: 12px;
        }

        span {
            font-size: 20px;
            font-family: PingFang-SC-Regular !important;
            font-weight: 400;
        }
    }

    .add-form-container {
        width: calc(100% - 60px);
        margin: auto;
        border: 1px solid rgba(221, 223, 230, 1);

        .add-form {
            width: 500px;
            margin: auto;
            margin-top: 30px;
        }

        .el-select {
            width: 100%
        }
    }

</style>
<style lang="less">
    .left-container {
        ul {
            background-color: #22345E
        }
    }

    .btn-group {
        >div {
            text-align: center
        }
    }

    .date-line {
        text-align: center !important
    }

    // 下拉选
    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #55a8fd !important;
        color: #ffffff !important;
    }

    .el-select-dropdown__list {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        font-size: 14px !important;
        font-family: PingFang-SC-Regular !important;
        font-weight: 400;
    }

    .popper__arrow {
        display: none !important;
    }

    // 日历
    .el-picker-panel__body {
        font-family: PingFang-SC-Regular !important;
    }

    @import url('../../src/assets/less/override-element-ui.less');

</style>
